
.header {
  width: 100%;
  height: 44px;
  background: rgb(40, 40, 40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header_left{
    width: 650px;
    display: flex;
    align-items: center;
    img{
      width: 24px;
      height: 24px;
      margin: 0 20px;
    }
    ul{
      display: flex;
      align-items: center;
      width: 100%;
      height: 44px;
      li{
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        color: #888;
        margin-left: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        white-space: nowrap;
        &.active{
          color: #fff;
        }
        span{
          color: #888;
          font-size: 14px;
          margin-left: 10px;
        }
      }
    }
  }
  .header_right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    p{
      font-size: 12px;
      color: #888;
      cursor: pointer;
    }
    .logo{
      width: 33px;
      height: 22px;
    }
    p:nth-of-type(1){
      margin: 0 37px 0 73px;
      display: flex;
      align-items: center;
      img{
        width: 20px;
        height: 20px;
        margin-right: 11px;
      }
    }
    p:nth-of-type(3){
      margin: 0 26px;
    }
  }
}
.main{
  width: 100%;
  height: calc(100% - 44px);
  display: flex;
  .main_left{
    width: calc(100% - 381px);
    height: 100%;
    background: rgb(76, 76, 76);
    .nav_action{
      width: calc(100% - 2px);
      height: 77px;
      display: flex;
      align-items: center;
      background: rgb(244, 244, 244);
      .action_left{
        display: flex;
        align-items: center;
        .tree_icon{
          width: 20px;
          height: 20px;
          margin-left: 29px;
          cursor: pointer;
        }
        div:nth-of-type(1){
          margin-left: 145px;
        }
        div{
          display: flex;
          align-items: center;
          margin: 0 18px;
          img{
            width: 20px;
            height: 20px;
          }
          p{
            font-size: 12px;
            color: #4C4C4C;
            margin-left: 10px;
            position: relative;            
            span{
              display: block;
              position: absolute;
              left: 0;
              bottom: -16px;
            }
          }
        }
      }
      .line{
        width: 1Px;
        height: 50px;
        background:rgb(211, 211, 211);
        margin-left: 19px;
      }
      .action_right{
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        .tags{
          display: flex;
          align-items: center;
          padding: 0 10px;
        }
        .search{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          img{
            width: 20px;
            height: 20px;
            margin-left: 10px;
          }
          div{
            width: 200px;
            height: 34px;
            display: flex;
            align-items: center;
            border: 1px solid rgb(44, 211, 211);
            margin-left: 10px;
            border-radius: 4px;
            img{
              margin: 0 5px;
            }
            input{
              flex: 1;
              border: 0;
              background: rgb(244, 244, 244);

            }
          }
          .set{
            margin-right: 20px;
          }
        }
      }
    }
    .file_pic{
      display: flex;
      width: 100%;
      height: calc(100% - 77px);
      .tree_box{
        width: auto;
        height:100%;
        padding: 0 28px 0 18px;
        border-right: 1px solid rgb(211, 211, 211);
        box-sizing: border-box;
        .tree_head{
          width: 327px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30px 0;
          .upload{
            width: 20px;
            height: 20px;
            margin-left: 11px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .del_text{
            font-size: 12px;
            color: #fff;
          }
        }
      }
      .file_pic_data{
        flex: 1;
        height: 100%;
        padding: 0 25px;
        .content_head{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 78px;
          .left{
            display: flex;
            align-items: center;
            .arrow_icon{
              margin: 0 10px;
              cursor: pointer;
            }
          }
          .upload{
            width: 20px;
            height: 20px;
            margin-left: 25px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .content_center{
            display: flex;
            align-items: center;
            height: 48px;
            width: 306px;
            justify-content: space-between;
            border-bottom: 1Px solid #F4F4F4;
            .right{
              display: flex;
              align-items: center;
              img{
                width: 20px;
                height: 20px;
                margin: 0 10px;
              }
            }
            .center_btn{
              display: flex;
              align-items: center;
              span{
                color: #F4F4F4;
                font-size: 12px;
                margin-left: 10px;
              }
            }
            
          }
          .go_page{
            color: #F4F4F4;
            font-size: 12px;
            cursor: pointer;
          }
        }
        .folder{
          flex: 1;
          height: calc(100% - 78px);
          padding: 21px 0;
          box-sizing: border-box;
          overflow-y: auto;
          .guide{
            display: flex;
            align-items: center;
            margin-left: -15px;
            span{
              font-size: 12px;
              color: #F4F4F4;
              margin-left: 19px;
            }
          }
          .file_list{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            margin-bottom: 49px;
            .file_list_content{
              margin: 16px 23px 0;
              padding: 5px;
              box-sizing: border-box;
              // width: 72px;
              text-align: center;
              &.file_list_content_active{
                border: 1px solid #c9c9c9;
                border-radius: 4px;
              }
              img{
                width: 72px;
                height: 58px;
              }
              p:nth-of-type(1){
                color: #F4F4F4;
                font-size: 12px;
                margin-top: 10px;
                text-align: center;
              }
              p:nth-of-type(2){
                color: #888888;
                font-size: 10px;
                text-align: center;
              }
            }
          }
          .img_list_container{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .img_list{
              width: auto;
              height: 165px;
              margin: 5px;
              .imgs{
                width: auto;
                height: 165px;
                img{
                  width: auto;
                  height: 130px;
                }
                p{
                  width: 90px;
                  color: #e4e4e4;
                  font-size: 12px;
                  line-height: 15px;
                  text-align: center;
                  margin-top: 5px;
                  height: 30px;
                  overflow: hidden;
                  white-space: normal;
                  word-break: break-all;
                }
              }
            }
            .img_list_active{
              border: 1px solid #c9c9c9;
              border-radius: 4px;
            }
            .big{
              height: 265px;
              .big_img{
                height: 265px;
                img{
                  height: 235px;
                }
              }
            }
          }
        }
      }
    }
  }
  .main_right{
    width: 381px;
    height: 100%;
    overflow-y: auto;
    background: rgb(244, 244, 244);
    padding: 15px;
    box-sizing: border-box;
    .img_look{
      display: flex;
      align-items: center;
      height: 180px;
      justify-content: space-between;
      .look_upload{
        width: 284px;
        height: 180px;
        background: #f7f7f7;
        position: relative;
        .pic{
          width: 284px;
          height: 180px;
        }
        >span{
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          width: 100%;
          height: 100%;
          opacity: 0;
          div{
            width: 100%;
            height: 100%;
          span{
            display: block;
            width: 100%;
            height: 100%;
          }
          }
        }
      }
      
      .btn{
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        height: 180px;
        justify-content: space-between;
        img{
          width: 20px;
          height: 20px;
        } 
        .pic_btn{
          width: 52px;
          height: 28px;
          border: 1Px solid rgb(211, 211, 211);
          border-radius: 4px;
          color: #888888;
          font-size: 12px;
          line-height: 28px;
          text-align: center;
          margin-top: 10px;
        }       
        .active{
          color: #fff;
          background: rgb(228, 156, 148);
        }
      }
    }
    .file_type{
      width: 100%;
      margin-top: 42px;
      .file_type_list{
        margin-top: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
          width: 84px;
          height: 29px;
          color: #4C4C4C;
          font-size: 12px;
          line-height: 29px;
          text-align: center;
          &.border{
            border: 1px solid rgb(211, 211, 211);
            line-height: 27px;
          }
          input{
            width: 100%;
            height: 100%;
            border: none;
            background: rgb(244, 244, 244);
            text-align: center;
          }
        }
        .input{
          width: 193px;
          height: 29px;
          border: 1px solid rgb(211, 211, 211);
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          input{
            width: 180px;
            height: 25px;
            border: 0;
            background: rgb(244, 244, 244);
          }
        }
        .save, .reset{
          width: 21px;
          height: 21px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .add_type{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 10px;
        img{
          width: 20px;
          height: 20px;
          margin-right: 15px;
        }
        span{
          font-size: 12px;
          color: #7F7F7F;
        }
      }
    }
    .file_tag{
      display: flex;
      margin-top: 68px;
      .left{
        width: 284px;
        height: 165px;
        border: 1px solid rgb(211, 211, 211);
        border-radius: 4px;
        padding: 5px;
        p{
          font-size: 12px;
          color: #7F7F7F;
          margin: 10px 0;
          cursor: pointer;
        }
      }
      .right{
        margin-left: 15px;
        img{
          width: 20px;
          height: 20px;
        }
        p{
          font-size: 12px;
          color: #7F7F7F;
          margin-top: 14px;
        }
      }
    }
    .add_info{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 284px;
      height: 48px;
      margin-top: 25px;
      border: 1px solid rgb(211, 211, 211);
      input{
        width: 279px;
        height: 44px;
        border: 0;
        background: rgb(244, 244, 244)
      }
    }
    .detail_info{
      .title{
        color: #4C4C4C;
        font-size: 14px;
        font-weight: bold;
        margin: 82px 0 14px;
      }
      ._p{
        display: flex;
        align-items: center;
        margin: 5px 0;
        span{
          display: block;
          font-size: 12px;
          color: #4C4C4C;
        }
        span:nth-of-type(1){
          width: 120px;
        }
      }
    }
  }
}
.tree_list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  .tree_list_left{
    align-items: center;
    display: flex;
    img{
      width: 19px;
      height: 15px;
    }
    span{
      font-size: 14px;
      color: #F4F4F4;
      margin-left: 10px;
    }
  }
  .tree_list_right{
    display: flex;
    align-items: center;
    span{
      font-size: 12px;
      color: #BCBCBC;
    }
    img{
      width: 12px;
      height: 12px;
      margin-right: 19px;
    }
  }
}

.attribute_title{
   margin-top: 39px;
   margin-bottom: 13px;
}
.attribute_title_type{
  margin-top: 26px;
  color: #4C4C4C;
  font-size: 14px;
  margin-bottom: 13px;
}
.sure, .cancel{
  width: 139px;
  height: 42px;
  background: #f09891;
  color: #fff;
  font-size: 12px;
}
.cancel{
  background: #f4f4f4;
  color: #7F7F7F;
  border: 1px solid #e3e3e3;
}
.children_group_radio{
  width: 447px;
  height: 100px;
  padding: 13px;
  box-sizing: border-box;
  overflow-y: auto;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  margin-top: 10px;
}
.modal_filter_select{
  height: 1000px;
  overflow-y: auto;
}
.color_type{
  display: flex;
  align-items: center;
  p{
    width: 30px;
    height: 21px;
    border: 1px solid #888888;
    margin-right: 10px;
  }
}
.btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.tag_manage{
  width: 100%;
  height: 804px;
  .tag_head{
    display: flex;
    align-items: center;
    padding-top: 16px;
    .add_tag{
      display: flex;
      align-items: center;
      img{
        width: 20px;
        height: 20px;
        margin-left: 17px;
      }
      span{
        color: #4C4C4C;
        font-size: 14px;
        margin-left: 9px;
      }
    }
    .tag_search {
      width: 252px;
      height: 34px;
      border: 1px solid #CECECE;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-left: 46px;
      img{
        width: 20px;
        height: 20px;
        margin: 10px;
      }
      input{
        width: 200px;
        height: 30px;
        border: 0;
        background: #f7f7f7;
      }
    }
    .right{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .close{
        margin-left: 10px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .toggle{
        display: flex;
        align-items: center;
        margin-left: 30px;
        span {
          font-size: 12px;
          color: #888888;
          margin-left: 3px;
        }
      }
      .tag_manage_entry{
        display: flex;
        align-items: center;
        img{
          width: 20px;
          height: 20px;
        }
        span{
          font-size: 12px;
          color: #888888;
          margin-left: 3px;
        }
      }
    }
  }
}
.tag_data_2{
  width: 100%;
  height: calc(100% - 86px);
  margin-top: 34px;
  border-top: 2px solid #888;
  .history_tag{
    display: flex;
    align-items: center;
    min-height: 67px;
    border-bottom: 2px solid #888;
    .title_left{
      width: 149px;
      min-height: 67px;
      border-right: 1px solid #c9c9c9;
      box-sizing: border-box;
      p{
        width: 100%;
        padding-left: 17px;
        padding-right: 7px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0;
        span{
          font-size: 14px;
          color: #4C4C4C;
        }
      }
    }
  }
  .right{
    width: 100%;
  }
}
.tag_data{
  width: 100%;
  height: calc(100% - 86px);
  margin-top: 34px;
  border-top: 2px solid #888;
  .history_tag{
    display: flex;
    align-items: center;
    height: 67px;
    border-bottom: 2px solid #888;
    .title_left{
      width: 149px;
      height: 67px;
      border-right: 1px solid #c9c9c9;
      box-sizing: border-box;
      .tag_title{
        line-height: 67px;
        padding-left: 17px;
        color: #4C4C4C;
        font-size: 14px;
      }
    }
  }
  .tag_list_classfig{
    width: 100%;
    height: calc(100% - 67px);
    display: flex;
    .left{
      width: 149px;
      height: 100%;
      border-right: 1px solid #c9c9c9;
      box-sizing: border-box;
      p{
        width: 100%;
        height: 27px;
        padding-left: 17px;
        padding-right: 7px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0;
        span{
          font-size: 14px;
          color: #4C4C4C;
        }
        &.active_p{
          background: #e4e4e4;
        }
      }
    }
    .right{
      width: 100%;
    }
  }
}
.tag_list{
  width: 100%;
  display: flex;
  align-items: center;
  height: 67px;
  padding-left: 19px;
  box-sizing: border-box;
  p{
    padding: 8px 9px;
    color: #888888;
    font-size: 12px;
    border: 1px solid #c9c9c9;
    margin:0 4px;
    span{
      margin-left: 8px;
    }
    &.active_tag{
      background: #F09891;
      color: #fff;
    }
  }
}
.children_title{
  width: 560px;
  height: 27px;
  margin-left: 19px;
  display: flex;
  align-items: center;
  span{
    color: #4C4C4C;
    font-size: 14px;
    margin-right: 19px;
  }
}
.active_children{
  background: #E4E4E4;
}
.hover_content{
  width: 387px;
  height: 358px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .big_img{
    width: 367px;
    height: 253px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .avatar{
    width: 367px;
    margin-bottom:5px;
    span:nth-of-type(1) {
      color: #4C4C4C;
      font-size: 12px;
    }
    span:nth-of-type(2){
      color: #8AB5FF;
      font-size: 12px;
    }
  }
  .action{
    width: 367px;
    height: 51px;
    display: flex;
    align-items: center;
    border-top: 1px solid #c9c9c9;
    p{
      width: 51px;
      height: 51px;
      display: flex;
      align-items: center;
    }
  }
}
.upload_submit{
  span{
    cursor: pointer;
    overflow: hidden;
    position: relative;
    .upload_folder{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      overflow: hidden;
    }
  }
}